<template>
  <div class="container mx-auto">
    <h2 class="text-2xl font-medium mb-6">注册</h2>
    <form class="w-96" @submit.prevent="register">
      <div class="mb-4">
        <label class="block text-gray-700 font-bold mb-2" for="username">
          用户名
        </label>
        <input class="appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="userName" type="text" v-model="userName" placeholder="请输入用户名">
      </div>
      <div class="mb-4">
        <label class="block text-gray-700 font-bold mb-2" for="password">
          密码
        </label>
        <input class="appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" v-model="password" placeholder="请输入密码">
      </div>
      <div class="mb-4">
        <label class="block text-gray-700 font-bold mb-2" for="confirmPassword">
          确认密码
        </label>
        <input class="appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="confirmPassword" type="password" v-model="confirmPassword" placeholder="请输入确认密码">
      </div>
      <div class="mb-4">
        <label class="block text-gray-700 font-bold mb-2" for="mobile">
          手机号码
        </label>
        <input class="appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="mobile" type="text" v-model="mobile" placeholder="请输入手机号码">
      </div>
      <div class="mb-4">
        <label class="block text-gray-700 font-bold mb-2" for="code">
          验证码
        </label>
        <div class="flex">
          <input class="appearance-none border rounded-l w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="code" type="text" v-model="code" placeholder="请输入验证码">
          <button class="bg-gray-400 rounded-r px-3 text-white font-bold hover:bg-gray-500 focus:outline-none focus:shadow-outline" @click.prevent="sendCode" :disabled="isCounting">{{ buttonText }}</button>
        </div>
      </div>
      <div class="flex items-center justify-between">
        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">
          注册
        </button>
      </div>
    </form>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import {registerApi, sendCodeApi, verifyCodeApi} from '../api/User';
import {ElMessage} from "element-plus";
import router from "../router";

const userName = ref('');
const password = ref('');
const confirmPassword = ref('');
const mobile = ref('');
const code = ref('');
const isCounting = ref(false);
const countDown = ref(60);

// 输入框校验
const validate = () => {
  if (!userName.value) {
    ElMessage.error('请输入用户名');
    return false;
  }
  if (!password.value) {
    ElMessage.error('请输入密码');
    return false;
  }
  if (!confirmPassword.value) {
    ElMessage.error('请输入确认密码');
    return false;
  }
  if (password.value !== confirmPassword.value) {
    ElMessage.error('两次输入的密码不一致');
    return false;
  }
  // 手机号码校验
  if (!/^1[3456789]\d{9}$/.test(mobile.value)) {
    ElMessage.error('请输入正确的手机号码');
    return false;
  }
  if (!code.value) {
    ElMessage.error('请输入验证码');
    return false;
  }
  return true;
}
const sendCode = () => {
  if (!validate()) {
    return;
  }
  // 3. 发送验证码 后台参数为@RequestParam("phone") String memPhone
  sendCodeApi(mobile.value).then((res) => {
    if (res.data.code === 200) {
      ElMessage.success('验证码发送成功');
      isCounting.value = true;
      const timer = setInterval(() => {
        if (countDown.value <= 0) {
          isCounting.value = false;
          countDown.value = 60;
          clearInterval(timer);
        } else {
          countDown.value--;
        }
      }, 1000);
    } else {
      ElMessage.error(res.data.message);
    }
  });
  console.log('发送验证码请求');
};

const register = () => {
  // 验证验证码请求  后台参数为@RequestParam("phone") String memPhone, @RequestParam("code") String code
  // 1. 校验手机号码
  if (!/^1[3456789]\d{9}$/.test(mobile.value)) {
    ElMessage.error('请输入正确的手机号码');
    return;
  }
  // 2. 校验验证码
  if (!/^\d{6}$/.test(code.value)) {
    ElMessage.error('请输入正确的验证码');
    return;
  }
  verifyCodeApi(mobile.value, code.value).then((res) => {
    if (res.data.code === 200) {
      // 注册请求
      registerApi(userName.value,password.value, mobile.value).then((res) => {
        if (res.data.code === 200) {
          ElMessage.success(res.data.data);
          router.push('/login');
        } else {
          ElMessage.error(res.data.data);
        }
      });
    } else {
      ElMessage.error(res.data.message);
    }
  });
};

const buttonText = computed(() => {
  if (isCounting.value) {
    return `${countDown.value}秒后重试`;
  } else {
    return '发送';
  }
});
</script>

<style>
/* 可以在这里添加样式 */
</style>
